import React from 'react'
import pStyle from './pdkStyle.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  componentDidUpdate() {
  }

  scoreNumber(point) {
    const pointSigned = point > 0 ? '+' + point : point
    const numbers = (pointSigned + '').split('')
    return numbers.map(num => {
      if (point >= 0) {
        if (num === '+') {
          return 'img/paodekuai/shuzi/jia-active.png'
        }
        return `img/paodekuai/shuzi/1${num}.png`
      } else {
        if (num === '-') {
          return 'img/paodekuai/shuzi/jian-default.png'
        }
        return `img/paodekuai/shuzi/${num}.png`
      }
    })
  }

  render() {
    const {battleData, gameInfo, backroom} = this.props
    const {finishList, room} = battleData
    const time = window.util.getDateTime(room.createTime)
    const shareStyle = {width: gameInfo.width, height: gameInfo.height, margin: 'auto'}
    const bodyCn = pStyle['game-body']
    return <div id="share" className="result-wrapper" style={shareStyle}>
      <div className="game-bg">
        <img src="img/paodekuai/pdk-di.png" className="bg-image" alt=""/>
      </div>
      <img className={pStyle['pjzj']} src="img/paodekuai/pdk-zjtxt.png" alt=""/>
      <div className={pStyle['game-info']}>
        <div className="game-info-row">
          <span className="pull-left">跑得快 {gameInfo.name} 房号: {room.roomNo}</span>
          <span className="pull-right">{time}</span>
        </div>      
      </div>

      <div className={bodyCn}>
        {
          finishList.map((player, index) => {
            const points = this.scoreNumber(player.point)
            const nicknameCn = player.point > 0 ? pStyle['nickname'] + ' crimson' : pStyle['nickname']
            const centerCn = player.point >= 0 ? pStyle['card-center'] + ' ' + pStyle['yellow-text'] : pStyle['card-center']
            return <div className={pStyle['card-wrapper']} key={index}>
              <div className={pStyle['card']}>
                {
                  player.point > 0 ? <img src="img/paodekuai/faguang.png" className="score-bg" alt=""></img> : null
                }
                <div className={pStyle['card-left']}>
                  <div className={nicknameCn}>{player.nickname}</div>
                  <div className={pStyle['id']}>ID: {player.lftId}</div>
                  {
                    player.owner ? <img className={pStyle['owner']} src="img/paodekuai/pdk-owner.png" alt=""/> : null
                  }
                </div>
                <div className={centerCn}>
                  <div className={pStyle['detail-label']}>单局最高分: {player.suitMap.maxPoint}</div>
                  <div className={pStyle['detail-label']}>打出炸弹数: {player.suitMap.zhaDanCount}</div>
                  <div className={pStyle['detail-label']}>胜负局数: {player.suitMap.winCount}赢 &nbsp; {player.suitMap.loseCount}输</div>
                </div>
                <div className={pStyle['card-right']}>
                  <img className={pStyle['total-label']} src="img/paodekuai/pdk-active-total.png" alt=""/>
                  {
                    player.winner ? <img className={pStyle['big-winner']} src="img/paodekuai/pdk-winner.png" alt=""/> : null
                  }
                  <div className={pStyle['point-wrapper']}>
                    {
                      points.map((p, index) => {
                        return <img key={index} src={p} alt=""/>
                      })
                    }
                  </div>
                </div>
              </div>
            </div>
          })
        }
      </div>

      <div className={pStyle['gamble-tip']}>
        游戏结果仅作娱乐用途,禁止用于赌博行为
      </div>

      <div className="game-bottom pure-g">
        <div className="pure-u-1-2 text-center">
          <img onClick={backroom} src="img/paodekuai/pdk-back.png" alt=""/>
        </div>
        <div className="pure-u-1-2 text-center">
          <img src="img/paodekuai/pdk-share-btn.png" alt=""/>
        </div>
      </div>

    </div>
  }
}

export default App